@charset "utf-8";
@import './modules/header';
@import './modules/footer';
// 导航栏
// banner
.banner {
    width: 100%;
    height: 823px;
    background: url(/images/flash306.jpg) no-repeat;
    position: relative;
    .line {
        display: block;
        width: 1px;
        height: 100%;
        position: absolute;
        top: 0;
        right: 327px;
        background-color: white;
    }
    .banner_side {
        position: absolute;
        right: 162px;
        bottom: 225px;
        width: 215px;
        height: 350px;
        // background-color: yellowgreen;
        li {
            width: 215px;
            height: 115px;
            // background-color: #EF480D;
            margin-bottom: 2px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            div {
                width: 86px;
                height: 86px;
                border: 4px white solid;
                border-radius: 50%;
                // display: inline-block;
            }
            .orange {
                border: 4px orange solid;
            }
            .orangeColor {
                color: orange;
            }
            span {
                display: inline-block;
                width: 84px;
                height: 19px;
                font-size: 16px;
                font-weight: 700;
                color: white;
            }
        }
    }
}

// 右侧小按钮
.orange {
    border: 4px orange solid;
    color: orange;
}

.banner .banner_side .xiao306 {
    background: url(/images/xiao306.png) center center no-repeat;
}

.banner .banner_side .xiao302 {
    background: url(/images/xiao302.png) center center no-repeat;
}

.banner .banner_side .xiao304 {
    background: url(/images/xiao304.png) center center no-repeat;
}

// 热门周边
.circum {
    width: 100%;
    height: 900px;
    background-color: #f7f7f8;
    box-sizing: border-box;
    padding-top: 62px;
    div {
        width: 1373px;
        height: 804px;
        // background-color: #00d9ff;
        margin: auto;
        .circum-btn {
            // background-color: yellow;
            text-align: center;
            box-sizing: border-box;
            padding-top: 34px;
            h4 {
                font-size: 14px;
                font-weight: 700;
                color: #6d6d6d;
            }
            h2 {
                font-size: 56px;
                font-weight: 700;
                color: #b6a597;
            }
            i {
                width: 35px;
                height: 3px;
                background-color: #b6a597;
                display: block;
                margin: 0 auto;
                margin-top: 32px;
                margin-bottom: 45px;
            }
            span {
                width: 56px;
                height: 56px;
                display: inline-block;
                border-radius: 50%;
                background-color: #e6e6e6;
                margin-right: 30px;
                line-height: 56px;
                text-align: center;
                color: #b6a597;
                font-size: 16px;
                font-weight: 800;
            }
        }
        div {
            width: 308px;
            height: 378px;
            background-color: #ffffff;
            .pic {
                width: 308px;
                height: 319px;
                display: block;
                background-color: #ff2020;
                overflow: hidden;
                img {
                    width: 100%;
                    height: 100%;
                    transition: transform 0.3s;
                    position: relative;
                    top: 0;
                    left: 0;
                }
            }
            div {
                width: 308px;
                height: 61px;
                text-align: center;
                p {
                    font-size: 18px;
                    color: #b38069;
                }
                span {
                    color: red;
                    font-weight: 700;
                }
            }
        }
        div:first-child {
            background-color: rgba(0, 0, 0, 0)
        }
    }
    .circum-box {
        display: flex;
        justify-content: space-between;
        justify-items: center;
        flex-wrap: wrap;
    }
}

// 人气系列
.popularity {
    height: 1224px;
    width: 100%;
    background-color: white;
    .popularity-box {
        width: 1373px;
        height: 1224px;
        // background-color: #66ff00;
        margin: auto;
        position: relative;
        .popularity-title {
            width: 1029px;
            height: 178px;
            // background-color: yellow;
            text-align: center;
            box-sizing: border-box;
            padding-top: 34px;
            margin: auto;
            h4 {
                font-size: 14px;
                font-weight: 700;
                color: #6d6d6d;
            }
            h2 {
                font-size: 56px;
                font-weight: 700;
                color: #b6a597;
            }
            i {
                width: 35px;
                height: 3px;
                background-color: #b6a597;
                display: block;
                margin: 0 auto;
                margin-top: 15px;
                margin-bottom: 15px;
            }
            span {
                margin-bottom: 25px;
            }
        }
        .popularity-btn {
            width: 1029px;
            height: 89px;
            margin: auto;
            // background-color: rgb(0, 255, 234);
            display: flex;
            justify-content: space-between;
            align-self: start;
            ul {
                display: flex;
                justify-content: space-between;
                align-self: start;
                width: 731px;
                height: 50px;
                li {
                    cursor: pointer;
                    width: 104px;
                    height: 50px;
                    border: 1px solid #b6a597;
                    text-align: center;
                    line-height: 50px;
                    align-items: center;
                }
            }
            p {
                width: 165px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                border: 1px solid #b6a597;
                border-radius: 40px;
            }
        }
    }
    .popularity-picBox {
        position: absolute;
        width: 1345px;
        height: 958px;
        margin: auto;
        // background-color: #00d9ff;
        display: flex;
        display: none;
        div {
            width: 326px;
            height: 450px;
            // background-color: red;
            .pic {
                display: block;
                width: 326px;
                height: 327px;
                // background-color: rgb(183, 255, 183);
                overflow: hidden;
                img {
                    width: 100%;
                    height: 100%;
                    display: block;
                    transition: transform 0.3s;
                    position: relative;
                    top: 0;
                    left: 0;
                }
            }
            div {
                width: 326px;
                height: 123px;
                background-color: #f7f7f8;
                text-align: center;
                overflow: hidden;
                p {
                    display: block;
                    font: size 18px;
                    color: #9a8069;
                    margin-bottom: 18px;
                    margin-top: 20px;
                }
                span {
                    color: #e75014;
                    font-weight: 700;
                }
            }
        }
    }
}

.popularity .switchover .pic img {
    display: none;
    width: 100%;
    height: 100%;
}

.pic:hover img {
    transform: scale(1.3);
    // display: none;
}

.popularity .switchover {
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-left: 15px;
}

// brand  品牌系列
.brand {
    width: 100%;
    height: 755px;
    background-color: #f7f7f8;
    text-align: center;
    .brand-box {
        width: 1373px;
        height: 755px;
        // background-color: #66ff00;
        margin: auto;
        position: relative;
        .brand-title {
            width: 1029px;
            height: 332px;
            // background-color: yellow;
            text-align: center;
            box-sizing: border-box;
            margin: auto;
            position: relative;
            h4 {
                padding-top: 61px;
                font-size: 14px;
                font-weight: 700;
                color: #6d6d6d;
            }
            h2 {
                font-size: 56px;
                font-weight: 700;
                color: #b6a597;
            }
            i {
                width: 35px;
                height: 3px;
                background-color: #b6a597;
                display: block;
                margin: 0 auto;
                margin-top: 15px;
                margin-bottom: 15px;
            }
            p {
                width: 165px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                border: 1px solid #b6a597;
                border-radius: 40px;
                position: absolute;
                right: 0;
                top: 133px;
            }
        }
        .brand-pic {
            width: 100%;
            height: 423px;
            box-sizing: border-box;
            padding-bottom: 99px;
            img {
                width: 600px;
                height: 400px;
                display: inline-block;
            }
        }
    }
}

// creation 共创
.creation {
    overflow: hidden;
    width: 100%;
    height: 695px;
    // background-color: #f7f7f8;
    position: relative;
    margin-bottom: 51px;
    .creation-title {
        width: 100%;
        height: 187px;
        // background-color: yellow;
        text-align: center;
        box-sizing: border-box;
        margin: auto;
        position: relative;
        h4 {
            padding-top: 35px;
            font-size: 14px;
            font-weight: 700;
            color: #6d6d6d;
        }
        h2 {
            font-size: 56px;
            font-weight: 700;
            color: #b6a597;
        }
        i {
            width: 35px;
            height: 3px;
            background-color: #b6a597;
            display: block;
            margin: 0 auto;
            margin-top: 15px;
            margin-bottom: 15px;
        }
        p {
            width: 165px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: 1px solid #b6a597;
            border-radius: 40px;
            position: absolute;
            right: 415px;
            top: 100px;
        }
    }
    .creation-box {
        width: 1442px;
        height: 508px;
        text-align: center; // background-color: #66ff00;
        margin: auto;
        // overflow: hidden;
        ul {
            width: 3332px;
            height: 408px;
            display: flex;
            justify-content: space-between;
            justify-items: start;
            li {
                float: left;
                width: 327px;
                height: 458px;
                margin-right: 80px;
                .pic {
                    width: 327px;
                    ;
                    height: 337px;
                    overflow: hidden;
                    display: block;
                    img {
                        transition: transform 0.3s;
                        position: relative;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                    }
                }
                div {
                    width: 327px;
                    height: 121px;
                    overflow: hidden;
                    background-color: #f5f5f5;
                    p {
                        font-size: 20px;
                        margin-top: 30px;
                        margin-bottom: 24px;
                    }
                    span {
                        font-size: 17px;
                        color: #e75014;
                    }
                }
            }
        }
    }
}